  @after-width: -7px; // 边框距离内容的距离，小边框
  @left-width: 17%; // 左边导航栏宽度
  @middle-width: 60%; // 中间宽度
  @right-width: 22%; // 左边宽度
  @fontSize: 14px; // 基本字体大小
  @fontColor: #2BC7F6; // 基本颜色
  @bgColor: rgba(29, 64, 181, 0); // aside 背景颜色
  @power: 14px; //开关大小
  .utils-after-bg {
    // 工具样式，写上产生边框
    position: relative;
    background-color: rgba(29, 64, 181, .3);
	// z-index: 999;
    &::after {
      content: "";
      display: block;
      position: absolute;
      z-index: 0;
      top: @after-width;
      bottom: @after-width;
      left: @after-width;
      right: @after-width;
      background: url("../bg1.png") no-repeat;
      background-size: 100% 100%;
      background-origin: padding-box;
      // background: ;
    }
  }
	
	// 背景图片自适应
	.utils-background-image-cover{
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		border-radius: 10px;
	}
  .utils-panel-border {
	  border: 2px solid @fontColor;
	  border-radius: 10px;
	  background-color: rgba(43,199,246,.2);
	  animation: bgshan 7s infinite ease-in-out ;
	  transition: all .5s;
	  cursor: pointer;
	  &:hover {
		  box-shadow: 0 0 5px rgba(43,199,246,5),0 0 5px rgba(43,199,246,5),0 0 5px rgba(43,199,246,5),0 0 5px rgba(43,199,246,5);
	  }
  }
	.utils-loading-bg {
		position: fixed;
		left: 0;
		top: 0;
		height: 100vh;
		width: 100vw;
		z-index: 999999;
		background-color: rgba(0,0,0,.5);
	}
  .utils-relative-zIndex {
	position: relative;
	z-index: 999;
  }
  @keyframes bgshan {
	  0% {background-color: rgba(43,199,246,0);}
	  50% {background-color: rgba(43,199,246,.5);}
	  100% {background-color: rgba(43,199,246,0);}
  }
	
	.utilsPowerUp {
		border-radius: 50%;
		width: @power;
		height: @power;
		background-color: #00dd00;
		box-shadow: 0 0 5px #00dd00;
	}
	.utilsPowerDown:extend(.utilsPowerUp) {
		background-color: #ff0000;
		box-shadow: 0 0 5px #ff0000;
	}
  
  // flex 布局
  .utils-flex {
    display: flex;
  }
  
  .utils-flex-dir:extend(.utils-flex) {
    flex-direction: column;
  }
  
  .utils-flex-Justbetween:extend(.utils-flex) {
    justify-content: space-between;
  }
  
  .utils-flex-Justaround:extend(.utils-flex) {
    justify-content: space-around;
  }
  
  .utils-flex-Justcenter:extend(.utils-flex) {
    justify-content: center;
  }
  
  .utils-flex-Justend:extend(.utils-flex) {
    justify-content: flex-end;
  }
  
  .utils-flex-Juststart:extend(.utils-flex) {
    justify-content: flex-start;
  }
  
  .utils-flex-Aligncenter:extend(.utils-flex) {
    align-items: center;
  }
  
  .utils-flex-Alignspace:extend(.utils-flex) {
    align-items: space-between;
  }
  .utils-flex-Alignend:extend(.utils-flex) {
    align-items: flex-end;
  }
  
  .utils-flex-flex1 {
    flex: 1;
  }
  
  .utils-flex-flex2 {
    flex: 2;
  }
  
  .utils-flex-flex3 {
    flex: 3;
  }
	
	/* fade-transform */
	.fade-transform-leave-active,
	.fade-transform-enter-active {
	  transition: all 1s;
	}
	
	.fade-transform-enter {
	  opacity: 0;
	  transform: translateX(-30px);
	}
	
	.fade-transform-leave-to {
	  opacity: 0;
	  transform: translateX(30px);
	}
	// /* breadcrumb transition */
	// .breadcrumb-leave-active {
	//   transition: all 2s;
	// }
	// .breadcrumb-enter-active {
	// 	transition: all 1s;
	// }
	// .breadcrumb-enter,
	// .breadcrumb-leave-active {
	//   opacity: 0;
	//   transform: translateX(200px);
	// }
	// .breadcrumb-leave-to {
	// 	opacity: 1;
	// 	// transform: translateY(200px);
	// }